<template>
    <div class="file-data-node" v-if="item">
        <div class="name" v-if="item.name">
            {{ item.name }}
            <span class="sub">[{{ item.length }}]</span>
        </div>

        <div class="content">
            <template v-if=" item.data_type == 'string' ">
                <div class="value string">{{ item.value }}</div>
            </template>
            <template v-else-if=" item.data_type == 'number' ">
                <div class="value number">{{ item.value }}</div>
            </template>
            <template v-else-if=" item.data_type == 'list' ">
                <!-- 表示一个列表的值 -->
            </template>

            <div class="children" v-if="item.data_type != 'list' && inner_item.length>0">
                <FileDataNode v-for="(cnode, cindex) in inner_item" :key="cindex" :item="cnode"></FileDataNode>
            </div>
        </div>
    </div>
</template>


<style lang="scss">
.file-data-node {
    padding: 2px 4px;
    border: 1px solid #0001;
    font-size: 14px;
    &:hover {
        border-left-color: #f00;
    }
    > .name {
        > .sub {
            opacity: 0.4;
        }
    }
    > .content {
        > .value {
            &.string {
                color: #080;
            }
            &.number {
                color: #800;
            }
        }
        > .children {
            padding: 2px 2px 2px 20px;
            > .file-data-node + .file-data-node {
                border-top: none;
            }
        }
    }
}
</style>


<script lang="ts">
import _ from 'lodash';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { BaseDataNode } from '@/plugins/file-data/base-model'

@Component({
    components: {
        FileDataListValue: () => import('@/components/FileDataListValue.vue')
    }
})
export default class FileDataNode extends Vue {
    @Prop({ required: true })
    item?: BaseDataNode

    inner_item: BaseDataNode[] = []

    @Watch("item", { immediate: true })
    itemChanged(newval?: BaseDataNode, oldval?: BaseDataNode) {
        if (newval) newval.onValueChange = () => this.inner_item = newval.inner
    }
}
</script>